<template>
<div class="wrap">
	<div class="title">
		<span>积分订单</span><span>当前积分 : <i>{{score}}</i></span>
	</div>
    <div class="order" v-for="(order,index) in orderinformation">
		<div class="header">
		   <span v-for="order in order.orderstatus">{{order.name}}<i>{{order.num}}</i></span>			
		</div>
		<div class="ordercont">			
			 <div class="goods">
			 	<img :src="order.goodsarr.src"/>
			 	<span>{{order.goodsarr.name}}</span>
			 	<span>{{order.goodsarr.num}}</span>
			 	<span>{{order.goodsarr.price}}</span>
			 </div>		
		
			 <div class="totalprice">
			 	<span>积分 : {{order.totalprice}}</span>
			 </div>
			 <div class="operation">
			 	<a href="javascript:void(0);">查看详情</a>
			 	<button  @click="deleted(index)">{{order.status}}</button>
			 </div>
		 </div>
	</div>
	<div class="pager">
		 		<span><</span>
		 		<span v-for="pagenum in numarr">{{pagenum}}</span>	
		 	    <span>></span>
		 	    <input type="text" />
		 	    <span>/10</span>
		 	    <button>跳转</button>
	</div>
</div>
</template>

<script>
	export default{
		name:"integralorder",
		data(){
			return{
				score:240,
				orderinformation:[{orderstatus:[{name:"订单号:", num:"150319690000"},{name:"下单日期:", num:"2018.04.09 18:06:06"},{name:"爱果果水果店", num:""},{name:"订单状态:", num:"已完成"}],
				goodsarr:{src:require("../../assets/image/apricot.png"),name:"云南邵通丑苹果 6个装",num:"6个装",price:"¥35.0*1"},
				totalprice:50,
				status:"删除订单"},{orderstatus:[{name:"订单号:", num:"150319690000"},{name:"下单日期:", num:"2018.04.09 18:06:06"},{name:"爱果果水果店", num:""},{name:"订单状态:", num:"已完成"}],
				goodsarr:{src:require("../../assets/image/apricot.png"),name:"云南邵通丑苹果 6个装",num:"6个装",price:"¥35.0*1"},
				totalprice:51,
				status:"删除订单"},{orderstatus:[{name:"订单号:", num:"150319690000"},{name:"下单日期:", num:"2018.04.09 18:06:06"},{name:"爱果果水果店", num:""},{name:"订单状态:", num:"已完成"}],
				goodsarr:{src:require("../../assets/image/apricot.png"),name:"云南邵通丑苹果 6个装",num:"6个装",price:"¥35.0*1"},
				totalprice:52,
				status:"删除订单"},{orderstatus:[{name:"订单号:", num:"150319690000"},{name:"下单日期:", num:"2018.04.09 18:06:06"},{name:"爱果果水果店", num:""},{name:"订单状态:", num:"已完成"}],
				goodsarr:{src:require("../../assets/image/apricot.png"),name:"云南邵通丑苹果 6个装",num:"6个装",price:"¥35.0*1"},
				totalprice:53,
				status:"删除订单"},{orderstatus:[{name:"订单号:", num:"150319690000"},{name:"下单日期:", num:"2018.04.09 18:06:06"},{name:"爱果果水果店", num:""},{name:"订单状态:", num:"已完成"}],
				goodsarr:{src:require("../../assets/image/apricot.png"),name:"云南邵通丑苹果 6个装",num:"6个装",price:"¥35.0*1"},
				totalprice:54,
				status:"删除订单"},{orderstatus:[{name:"订单号:", num:"150319690000"},{name:"下单日期:", num:"2018.04.09 18:06:06"},{name:"爱果果水果店", num:""},{name:"订单状态:", num:"已完成"}],
				goodsarr:{src:require("../../assets/image/apricot.png"),name:"云南邵通丑苹果 6个装",num:"6个装",price:"¥35.0*1"},
				totalprice:55,
				status:"删除订单"},{orderstatus:[{name:"订单号:", num:"150319690000"},{name:"下单日期:", num:"2018.04.09 18:06:06"},{name:"爱果果水果店", num:""},{name:"订单状态:", num:"已完成"}],
				goodsarr:{src:require("../../assets/image/apricot.png"),name:"云南邵通丑苹果 6个装",num:"6个装",price:"¥35.0*1"},
				totalprice:56,
				status:"删除订单"},],
				numarr:[1,2,3,4,"...",10]
			}
		},
		methods:{
			deleted:function(index){
//				console.log(index);
				this.orderinformation.splice(index,1);
			}
		}
	}
</script>

<style scoped>
.wrap{
	width: 1085px;
	border: 1px solid rgb(242,242,242);	
}
.title{
	font-weight: 400;
	font-size: 18px;
	color: rgb(60,60,60);
	text-indent: 22px;
	line-height: 58px;
	border-bottom: 1px solid rgb(242,242,242);	
}
.title>span:last-child{
	padding-left: 848px;
}
.title i{
	font-style: normal;
	color: rgb(248,141,48);
}
/*订单内容*/
.order{
   	width: 1040px;
   	height: 167px;
   	margin:0 auto 21px ;
   	border: 1px solid rgb(242,242,242);
   	font-size: 0;
   }
   .header{
   	width: 100%;
   	line-height: 47px;
   	background-color: rgb(242,242,242);
   	font-size: 16px;
   }
   .header>span{
   	  color: rgb(101,101,101);
   }
   .header i{
   	  font-style: normal;
   }
   .header>span:nth-child(1){
   	  padding-left: 21px;
   }
   .header>span:nth-child(2){
   	  padding-left: 50px;
   }
   .header>span:nth-child(3){
   	  color:rgb(141,202,48);
   	  padding-left: 53px;
   }
   .header>span:nth-child(4){
   	  padding-left: 290px;
   }
   .header>span:nth-child(4)>i{
   	  color:rgb(246,133,41);
   }
   .goods{
   	  display: inline-block;
   	  vertical-align: top;
   	  width: 690px;
   	  height: 121px;
   	  font-size: 14px;
   }
   
   .goods img{
   	  padding: 21px 0 0 21px;
   }
   .goods span{
   	  vertical-align: 35px;
   }
   .goods span:nth-of-type(1){
   	  color:rgb(112,112,112);
   	  padding-left: 21px;
   }
   .goods span:nth-of-type(2){
   	  color:rgb(166,166,166);
   	  padding-left: 150px;
   }
   .goods span:nth-of-type(3){
   	  color:rgb(133,133,133);
   	  padding-left: 110px;
   }
   .totalprice{
   	  display: inline-block;
   	  vertical-align: top;
   	  width: 208px;
   	  line-height: 121px;
   	  border-left: 1px solid rgb(233,233,233);
   	  font-size: 14px;
   	  text-align: center;
   }
   .totalprice>span{
   	  display: inline-block;
   	  width: 100%;
   	  line-height: 30px;
   	  color: rgb(133,133,133);
   }
   .operation{
   	  display: inline-block;
   	  width: 138px;
   	  height: 121px;
   	  border-left: 1px solid rgb(233,233,233);
   	  font-size: 16px;
   	  text-align: center;
   }
   .operation>a{
   	   display: inline-block;
   	   width: 100%;
   	   color: rgb(141,202,48);
   	   text-decoration: underline;
   	   padding: 25px 0 20px;
   }
   .operation>button{
   	   display: inline-block;
       height: 30px;
       min-width: 90px;
   	   color: white;
   	   font-size: 14px;
   	   border: none;
   	   border-radius: 5px;
   	   background-color: rgb(247,131,39);
   }
   /*分页*/
   .pager{
   	  width: 825px;
   	  height: 32px;
   	  margin: 30px auto 40px;
   	  font-size: 0;
   }
   .pager>span{
   	  display: inline-block;
   	  width: 50px;
   	  line-height: 32px;
   	  text-align: center;
   	  font-size: 16px;
   	 
   }
   .pager>input{
   	  display: inline-block;
   	  width: 50px;
   	  height: 26px;
   	  vertical-align: top;
   	  margin-left: 28px;
   }
   .pager>span:nth-of-type(1){
   	  background-color: rgb(221,221,221);
   	  color: white;
   }
   .pager>span:nth-of-type(8){
   	  background-color: rgb(221,221,221);
   	  margin-left: 10px;
   	  color: white;
   }
   .pager>span:nth-of-type(n+2):nth-of-type(-n+7){
   	  margin-left:30px ;
   	  color: rgb(102,102,102);
   }
   .pager>button{
   	  font-size: 16px;
   	  border: none;
   	  display: inline-block;
   	  width: 50px;
   	  height: 32px;
   	  background-color: rgb(247,131,39);
   	  color: white;
   }  
</style>